<template>
	<view
		class="remind"
		:style="{
			marginTop: styles.marginTop + 'px',
			marginBottom: styles.marginBottom + 'px'
		}"
	>
		<view class="scroll-wrap" v-if="styles.status==1?true:false" :style="{background:styles.colorBg,color:styles.colorWord,backgroundRgba: styles.percent / 100,marginTop:styles.shifting+'px'}">
			<view class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
				<view class="one f-x-bt" v-for="(item,index) in styles.numberList" :key="index">
					<view class="flex_one">
						<image :src="item.img" mode=""></image>
						<view>{{ item.text }}</view>
					</view>
					<view>
						{{item.time}}秒
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	name: 'remind',
	data() {
		return {
			img: '../../../static/tubiao/xuanfu.png',
			activeIndex: 0,
			intnum: undefined
		};
	},
	computed: {
		top() {
			return -this.activeIndex * 30 + 'px';
		}
	},
	props: ['styles'],
	mounted() {
		this.ScrollUp();
		
	},
	methods: {
		ScrollUp() {
			// eslint-disable-next-line no-unused-vars
			this.intnum = setInterval(_ => {
				if (this.activeIndex < this.styles.numberList.length) {
					this.activeIndex += 1;
				} else {
					this.activeIndex = 0;
				}
			}, 1000);
		},

		Stop() {
			clearInterval(this.intnum);
		},
		Up() {
			this.ScrollUp();
		}
	}
};
</script>
<style lang="scss" scoped>
.remind {
	// width: 0%;
	.nav {
		image {
			width: 50upx;
			height: 50upx;
			display: flex;
		}
	}
	.scroll-wrap {
		height: 74upx;
		overflow: hidden;
		width: 60%;
		border-radius: 20upx;
		margin-left: 20upx;
		position: fixed;
		z-index: 999;
	}

	.scroll-content {
		position: relative;
		transition: top 0.5s;
		.one{
			height: 74upx;
			padding: 0 20upx;
			&>view{
				&>view:nth-child(2){
					margin-left: 20upx;
				}
				image{
					width: 48upx;
					height: 48upx;
				}
			}
		}
	}

	
}
</style>
